Vue Js Get checkbox checked value: In Vue.js, you can retrieve the checked items from a group of checkboxes by binding the “checked” attribute to an array in your component’s data and using the “v-model” directive to bind the value of each checkbox to an element in the array. You can then access the array in your component’s methods or computed properties. We will learn how to get the checked checkbox value in vue js in this tutorial.
How to get checked checkbox value in vuejs?
In this example, the “selectedOptions” data property is an array that will store the values of the checkboxes that are checked. The “v-model” directive binds the value of each checkbox to an element in the “selectedOptions” array, so when the user checks or unchecks a checkbox, the “selectedOptions” array will be updated accordingly. The selected options can be displayed in the template using the moustache syntax({{}}).
Vue Js Get checkbox checked value | Example
<div id="app">
<div v-for="(item,index) in items">
<input
:value="item"
type="checkbox"
v-model="selectedOptions"
/>{{item}}
</div>
<pre>Selected item: {{selectedOptions}} </pre>
</div>
<script type="module">
import { createApp } from "vue";
createApp({
data() {
return {
selectedOptions: [],
items: [ "Vue","React","Angular","Node","Express","Php","Bootstrap",],
};
},
methods: {},
}).mount("#app");
</script>
Output of above example
